<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css(v=3.3.6)}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css(v=4.4.0)}" rel="stylesheet">
    <!--多选框-->
    <link th:href="@{/css/plugins/chosen/chosen.css}" rel="stylesheet">
    <!-- Sweet Alert -->
    <link th:href="@{/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css(v=4.1.0)}" rel="stylesheet">
    <link th:href="@{/css/plugins/toastr/toastr.min.css}" href="" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>管理员列表</h2>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addAdmin">
                新增管理员
            </button>
            <div class="modal inmodal" id="addAdmin" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <form class="form-horizontal m-t" id="addUserForm" th:action="${action}" method="post">
                        <div class="modal-content animated bounceInRight">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                                </button>
                                <h4 class="modal-title">新增管理员</h4>
                            </div>
                            <div class="modal-body">

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">用户名：</label>
                                        <div class="col-sm-8">
                                            <input id="username" name="username" class="form-control" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">手机号：</label>
                                        <div class="col-sm-8">
                                            <input id="phone" name="phone" class="form-control" type="number">
                                        </div>
                                    </div>
                                    <div class="form-group" id="roles">
                                        <label class="col-sm-3 control-label">角色(可多选)：</label>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <select data-placeholder="请选择角色(可多选)" class="chosen-select" multiple style="width:350px;" tabindex="4" name="roles" >
                                                    <th:block th:each="role:${roles}">
                                                        <option th:value="${role.id}" th:text="${role.roleDesc}"></option>
                                                    </th:block>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">密码：</label>
                                        <div class="col-sm-8">
                                            <input id="password" name="password" class="form-control" type="password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">确认密码：</label>
                                        <div class="col-sm-8">
                                            <input id="confirm_password" name="confirm_password" class="form-control" type="password">
                                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">E-mail：</label>
                                        <div class="col-sm-8">
                                            <input id="email" name="email" class="form-control" type="email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">联系地址：</label>
                                        <div class="col-sm-8">
                                            <input id="address" name="address" class="form-control" type="text">
                                        </div>
                                    </div>
                                <div class="col-sm-12" style="display:none;">
                                    <span class="help-block m-b-none" id="errTip" style="color: #ac2925"><i class="fa fa-info-circle"></i>这里显示错误信息</span>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" type="submit">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <th:block th:each="user : ${users}">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#"  th:onclick="'javascript:editAdminModal(\''+${user.id}+'\')'" data-toggle="modal">编辑资料</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times del-user"></i>
                            </a>
                            <input class="userId" type="hidden" th:value="${user.id}">
                        </div>
                    </div>
                    <div class="ibox-content" style="padding:0px">
                        <div class="contact-box" style="margin-bottom: 0px">
                            <a href="#">
                                <div class="col-sm-4">
                                    <div class="text-center">
                                        <img alt="image" class="img-circle m-t-xs img-responsive" th:src="${user.avatar}">
                                    </div>
                                </div>
                                <div class="col-sm-8">
                                    <h3><strong th:text="${user.username}">奔波儿灞</strong></h3>
                                    <p th:inline="text"><i class="fa fa-map-marker"></i> [[${user.address}]]</p>
                                    <address th:inline="text">
                                        <strong>角色:</strong>
                                        <th:block th:each="role:${user.roles}">
                                            <strong th:text="${role.roleDesc}+' '"></strong>
                                        </th:block>
                                        <br>
                                        E-mail:[[${user.email}]]<br>
                                        <abbr title="Phone">Tel:</abbr> [[${user.phone}]]
                                    </address>
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </th:block>

    </div>
</div>
<div th:replace="/footer"></div>

<script th:src="@{/js/users/users.js}"></script>


<script>
    $(document).ready(function () {
        $('.contact-box').each(function () {
            animationHover(this, 'pulse');
        });
    });
    function editAdminModal(userId) {
        openModal('/admin/editAdminModal?userId='+userId,function (data) {
            loadMdModal(data);
        });
    }


</script>
</body>

</html>
